<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);

function fetchApi() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      count.value = 6;
      resolve(true);
    }, 3000);
  });
}
await fetchApi();
</script>

<template>
  <ul>
    <li v-for="item in count" :key="item">
      <img src="" alt="" />
      <div class="item">
        <p class="title">北京四合院</p>
        <p class="info">234/晚 * 1个人</p>
      </div>
    </li>
  </ul>
</template>

<style scoped lang="scss">
ul {
  @include placeholder-order;
}
li {
  @include flex-layout(row, space-between, center);
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  &:last-child {
    border-bottom: none;
  }
  img {
    width: 65px;
    height: 45px;
    border-radius: 4px;
    margin-right: 5px;
    object-fit: cover;
  }
  .mess {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 5px;
    width: 100px;
    overflow: hidden;
    p {
      line-height: 16px;
      font-weight: normal;
      margin: 5px 0;
      max-width: 100px;
    }
    .title {
      font-weight: bold;
      color: #333;
      font-size: 14px;
      display: inline-block;
      @include line-text-overflow;
    }
    .info {
      color: #666;
      font-size: 12px;
    }
  }
}
</style>
